// ---------- HEADER ----------
.header {
  font-weight: 400;
  font-size: 12px;
  line-height: 14px;
  color: #ffffff;

  // ---------- HEADER__TOP-LINE
  &__top-line {
    height: 45px;

    .col {
      height: 45px;
      display: flex;
      justify-content: center;
      align-items: center;

      a,
      a:active {
        color: #ffffff;
        text-decoration: none;
      }

      .active-lang {
        opacity: 1;
      }

      .inactive-lang {
        opacity: 0.5;
      }
    }
  }

  // ---------- HEADER__BOT-LINE
  &__bot-line {
    height: 100px;

    .col {
      height: 100px;
      display: flex;
      justify-content: center;
      align-items: center;
    }

    .header__logo {
      img {
        max-width: 100%;
        height: auto;
      }
    }

    .col-sm-2 {
      border-left: 1px solid #ffffff;
      height: 40px;
    }
  }

  .row {
    display: flex;
    align-items: center;
  }

  ul {
    padding-left: 48px;

    li {

      display: inline;
      text-transform: uppercase;
      font-weight: 400;
      font-size: 16px;
      line-height: 16px;
      letter-spacing: 0.05em;
      padding: 0 17px;
    }
  }
}

// ---------- MEDIA-QUERIES ----------
@media (max-width: 500px) {
  .header__bot-line {
    height: 200px;
    display: flex;
    flex-flow: row wrap;
    justify-content: center;

    .col-3 {
      width: 100%;

      .header-logo {
        border: none;
      }
    }

    .col-7 {
      width: 100%;
      padding: 0;
      margin: 0;
    }

    .space-block {
      display: none;
    }

    ul {
      display: table-column;
      text-align: left;

      li {
        padding: 0;
      }
    }
  }
}


// ---------- HEADER MEDIA ----------
@media (min-width:500px ) and (max-width: 1100px) {
  .header__bot-line {
    ul li {
      padding: 1px;
    }
  }
}